<template>
	<uni-nav-bar statusBar @clickLeft="back" @clickRight="toRecord" :shadow="false" :border="false" fixed
		left-icon="left" rightText="充值记录" title="我要充值" color="#ffffff" backgroundColor="#3c9cff" shadow />
	<view class="recharge-container">
		<view class="base-info flex flex-direction align-center">
			<image src="/static/logo.png" mode="widthFix"></image>
		</view>

		<view class="form-wrap">
			<uni-forms ref="form" :modelValue="formData" validate-trigger="blur" label-position="top" label-width="100%"
				:rules="rules" err-show-type="toast">
				<!-- <uni-forms-item label="平台钱包地址" class="fbox" name="payeeInfo">
					<uni-data-select class="downlist" placeholder="请输入平台钱包地址" v-model="formData.payeeInfo"
						:localdata="walletList"></uni-data-select>
					<uni-icons custom-prefix="iconfont" type="icon-dizhi" color="#999" size="18"></uni-icons>
				</uni-forms-item> -->
				<uni-forms-item label="平台钱包地址(trc20)" class="fbox" name="payeeInfo">
					<uni-easyinput type="text" v-model="formData.payeeInfo" trim="all"
						:inputBorder="false" :clearSize="20" placeholder="请输入平台钱包地址" style="font-size: 10px;" disabled/>
					<up-copy :content="formData.payeeInfo">
						<uni-icons custom-prefix="iconfont" type="icon-copy" color="#666" size="18"></uni-icons>
					</up-copy>
					<!-- <uni-icons custom-prefix="iconfont" type="icon-yonghu" color="#999" size="18"></uni-icons> -->
				</uni-forms-item>
				<!-- <view class="line">或</view>
				<view class="scan" @click="$modal.building()">
					<uni-icons custom-prefix="iconfont" type="icon-saoma" color="#2979ff" size="18"></uni-icons>
					<text>扫描商户二维码</text>
				</view> -->
				<uni-forms-item label="用户钱包地址" class="fbox" name="payerInfo">
					<uni-easyinput type="text" v-model="formData.payerInfo" trim="all"
						:inputBorder="false" :clearSize="20" placeholder="请输入充值用户钱包地址" />
					<uni-icons custom-prefix="iconfont" type="icon-yonghu" color="#999" size="18"></uni-icons>
				</uni-forms-item>
				<uni-forms-item label="存币金额" class="fbox" name="amount">
					<uni-easyinput type="digit" v-model="formData.amount" trim="all"
						:inputBorder="false" :clearSize="20" placeholder="请输入存币金额" />
					<view class="unit"><up-text type="primary" :text="currencyUnit"></up-text></view>
				</uni-forms-item>
				<view class="total" v-if="isUsdt">
					<view class="num">
						当前汇率：<view><up-text :text="currencyRate"></up-text></view>
					</view>
				</view>
				<!-- <view class="total">
					<view class="num">
						可存款金额：<view><up-text mode="price" text="800"></up-text><text>KK币</text></view>
					</view>
					<up-text text="全部" type="primary" :size="14"></up-text>
				</view> -->
				<up-text class="tip" prefixIcon="error-circle" text="温馨提示：为保障您的资金安全，存款之前请确认平台和充值玩家账号，资金一旦转出，本平台概不负责。"
					type="info" :size="13"></up-text>
			</uni-forms>
		</view>

		<view class="btn-group">
			<up-button @click="submit" color="linear-gradient(to right, rgb(0, 85, 255), rgb(0, 170, 255))" hairline
				shape="circle" text="确认"></up-button>
		</view>
	</view>

	<geek-code ref="code" v-model:code="code" @success="onConfirm"></geek-code>
</template>

<script>
	import _ from 'lodash'
	import {
		recharge,bizConfiglist
	} from '@/api/seller/account.js'
	export default {
		data() {
			return {
				accountId: '',
				// 谷歌验证码
				code: '',
				// 表单数据
				formData: {
					payerInfo: '',
					payeeInfo: '',
					amount: null
				},
				rules: {
					// 对name字段进行必填验证
					payerInfo: {
						rules: [{
							required: true,
							errorMessage: '请输入用户钱包地址',
						}]
					},
					payeeInfo: {
						rules: [{
							required: true,
							errorMessage: '请选择商户钱包地址',
						}]
					},
					amount: {
						rules: [{
								required: true,
								errorMessage: '请输入存款金额',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value < 1) {
										callback('存款金额不能低于1')
										return false
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		computed: {
			walletList() {
				const lists = this.$store.state.user?.wallets || []
				return _.map(lists, vo => {
					return {
						...vo,
						text: vo.walletName,
						value: vo.walletAddr
					}
				})
			},

			accountInfo() {
				return this.$store.state.user?.account || {}
			},

			myAccountId() {
				return this.accountInfo?.id || ''
			},
			
			appInfo() {
				return this.$store.state.user?.appInfo || {}
			},
			
			rechargeWallet(){
				return this.appInfo.rechargeWallet || ''
			},
			
			currency(){
				return this.appInfo.currency || ''
			},
			currencyUnit(){
				return this.appInfo.settleCurrencyUnit || ''
			},
			currencyRate(){
				return this.appInfo.settleCurrencyRate || ''
			},
			
			isUsdt(){
				return _.toUpper(this.currency) !== 'CNY'
			},

			args() {
				return {
					...this.formData,
					accountId: this.accountId
				}
			}
		},
		
		watch:{
			rechargeWallet(){
				this.formData.payeeInfo = this.rechargeWallet || ''
			}
		},

		methods: {
			// 触发提交表单
			submit() {
				const self = this
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					self.$refs.code.open()
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			
			back() {
				this.$tab.navigateBack()
			},
			
			toRecord() {
				this.$tab.navigateTo('/pages_mine/pages/recharge/detail')
			},

			onConfirm() {
				const self = this
				
				if (!this.code) {
					return false
				}

				recharge(this.args, this.code).then(({
					data
				}) => {
					// this.$modal.msgSuccess('充值成功')
					uni.showModal({
						title: '系统提示',
						content: '充值已成功提交，需要等待后台审核，审核通过后余额才会增加，是否继续充值？',
						cancelText: '退出充值',
						confirmText: '继续充值',
						success: function(res) {
							if (res.confirm) {
								self.formData = {
									payerInfo: '',
									payeeInfo: '',
									amount: null
								}
							} else {
								self.$tab.navigateBack()
							}
						}
					})
				})
			},
			
			getBizConfiglist(){
				bizConfiglist().then((data) => {
					console.log(data,'data')
				})
			}
		},

		onLoad(options) {
			this.accountId = options?.id || this.myAccountId
			this.formData.payeeInfo = this.rechargeWallet || ''
			//this.getBizConfiglist()
		}
	}
</script>

<style lang="scss" scoped>
	.recharge-container {

		.base-info {
			padding: 40rpx 20rpx 100rpx;
			background-color: #3c9cff;
			color: #fff;
			height: 300rpx;

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.form-wrap {
			background-color: #fff;
			margin: -60rpx 40rpx 20rpx;
			border-radius: 18rpx;
			overflow: hidden;
			box-shadow: 0 0 10rpx #a2a2a2;
			padding: 40rpx;

			.line {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #222;
				padding: 16rpx;
				position: relative;

				&::before,
				&::after {
					content: "";
					display: block;
					height: 1px;
					background-color: #e2e2e2;
					flex: 1;
				}

				&::before {
					margin-right: 30rpx;
				}

				&::after {
					margin-left: 30rpx;
				}
			}

			.scan {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #2979ff;

				&>text {
					margin-left: 10rpx;
				}
			}

			.downlist {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
				border: none;
				background: none;
				margin-right: 20rpx;

				&::v-deep {
					.uni-select {
						border: none !important;
						padding-left: 0;

						.uni-select__input-placeholder {
							color: gray;
							font-size: 14px;
						}

						.uniui-clear {
							font-size: 36rpx !important;
						}

						.uniui-top,
						.uniui-bottom {
							display: none !important;
						}
					}
				}
			}

			&::v-deep {
				.uni-forms-item__label {
					font-size: 30rpx;
					font-weight: 600;
					color: #000;
				}

				.uni-forms-item {
					margin-bottom: 20rpx;

					.uni-input-placeholder {
						font-size: 28rpx;
						color: #999;
					}

					.uni-input-input {
						color: #333;
					}

					&.fbox {
						.uni-forms-item__content {
							display: flex;
							align-items: center;
							// border-bottom: 1px solid #f2f2f2;
						}
						
						.uni-easyinput__content{
							&.is-disabled{
								background-color: transparent !important;
								& :nth-child(1) {
								    font-size: 12px;
								}
							}
							
						}

						.unit {
							font-size: 24rpx;
							color: #3c9cff;
						}
					}
				}
			}

			.total {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 30rpx;

				.num {
					flex: 1;
					overflow: hidden;
					display: flex;
					align-items: center;

					&>view {
						display: flex;
						align-items: center;

						&>text {
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}

					&::v-deep {
						.u-text__price {
							display: none !important;
						}

						.u-text__value {
							color: #2979ff !important;
							font-size: 36rpx !important;
							font-weight: bold !important;
						}
					}
				}

				&::v-deep {
					.u-text {
						flex: none;
						width: auto;
					}
				}
			}

			.tip {
				line-height: 40rpx;
				text-align: justify;
				background-color: #f8f8f9;
				padding: 16rpx;
				border-radius: 8rpx;
				align-items: flex-start;

				&::v-deep {
					.u-text__prefix-icon {
						margin-right: 10rpx;
						margin-top: 4rpx;
					}
				}
			}
		}

		.btn-group {
			padding: 60rpx 40rpx;
			margin-top: 20rpx;
		}
	}
</style>